<template>
  <div
    class="mb-6 px-4 cursor-pointer"
    @mouseenter="isHover = true"
    @mouseleave="isHover = false"
  >
    <div
      f="c-c col"
      class="py-12 rd-2 bg-transparent"
      transition="colors duration-300 ease-in-out"
      :class="{
        'text-primary !bg-primary_active': itemKey === activeKey,
        'text-primary': isHover,
      }"
    >
      <component :is="icon" :class="[isMini ? 'text-16' : 'text-20']" />
      <p
        w-full
        text="12 center ellipsis-1"
        transition="height duration-300 ease-in-out"
        :class="[isMini ? 'h-0 pt-0' : 'h-24 pt-4']"
      >
        {{ label }}
      </p>
    </div>
  </div>
</template>

<script setup lang="ts">
interface Props {
  /** 路由名称 */
  itemKey: string;
  /** 路由名称文本 */
  label: string;
  /** 当前激活状态的路由名称 */
  activeKey: string;
  /** 路由图标 */
  icon?: Component;
  /** mini尺寸的路由 */
  isMini?: boolean;
}

withDefaults(defineProps<Props>(), {
  isMini: false,
});

const isHover = ref(false);
</script>

<style scoped></style>
